<template>
  <div>
    <div class="xtx-city" ref="target">
      <div class="select" @click="toggle">
        <span class="placeholder"
          >{{ obj.provincialName }} {{ obj.cityName }}
          {{ obj.countyName }}</span
        >
        <span class="value"></span>
        <i class="iconfont icon-angle-down"></i>
      </div>
      <div class="option" v-if="isPanel">
        <span
          class="ellipsis"
          @click="setCity(item)"
          v-for="(item, index) in list"
          :key="index"
          >{{ item.name }}</span
        >
      </div>
    </div>
  </div>
</template>

<script>
// 引入axios
import axios from "axios";
export default {
  props: ["obj"],
  data() {
    return {
      // 展开收起的变量
      isPanel: false,
      //城市数据
      cityData: [],
      //点击时城市配置 省 市 县的code和名字
      cityObj: {
        // 省
        provincialCode: null,
        provincialName: null,
        // 市
        cityCode: null,
        cityName: null,
        // 区
        countyCode: null,
        countyName: null,
      },
    };
  },
  methods: {
    // 打开
    open() {
      this.isPanel = true;
      //只有打开的时候调用接口取数据
      this.getCityData();
      //打开之后清空一下配置  因为不清空会一直在最后的县级显示
      this.cityObj = {
        // 省
        provincialCode: null,
        provincialName: null,
        // 市
        cityCode: null,
        cityName: null,
        // 区
        countyCode: null,
        countyName: null,
      };
    },
    // 关闭
    close() {
      this.isPanel = false;
    },
    // 切换
    toggle() {
      if (this.isPanel) {
        this.close();
      } else {
        this.open();
      }
    },
    // 点击城市选项
    setCity(info) {
      // 省
      if (info.level == 0) {
        this.cityObj.provincialCode = info.code;
        this.cityObj.provincialName = info.name;
      }
      //市
      if (info.level == 1) {
        this.cityObj.cityCode = info.code;
        this.cityObj.cityName = info.name;
      }
      //县
      if (info.level == 2) {
        this.cityObj.countyCode = info.code;
        this.cityObj.countyName = info.name;
        // 点击县级之后 说明已经完成 就关闭展开的数据
        this.close();
        // 地址选完之后  修改内容
        this.$emit("changeCity", this.cityObj);
      }
    },
    // 请求城市数据
    async getCityData() {
      if (window.city) {
        this.cityData = window.city;
      } else {
        let { data } = await axios.get(
          "https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json"
        );
        window.city = data;
        this.cityData = data;
      }
    },
  },
  computed: {
    // 后台返回的数据是树形数据 所以要进行处理
    list() {
      let arr = [];
      //默认为显示最高的城市级别
      arr = this.cityData;
      //如何显示下一级的数据  通过判断存储的配置里面的省级是否有值
      if (this.cityObj.provincialCode != null) {
        let cityObj = this.cityData.find((item) => {
          return item.code == this.cityObj.provincialCode;
        });
        arr = cityObj.areaList;
      }
      if (this.cityObj.cityCode != null) {
        // 这里的arr现在执行到这是市的数据  在市的数据中找县的数据
        let countyObj = arr.find((item) => {
          return item.code == this.cityObj.cityCode;
        });
        arr = countyObj.areaList;
      }
      return arr;
    },
  },
  mounted() {
    // 监听视口点击事件
    // document.addEventListener("click", (e) => {
    //   //   console.log(e.target);
    //   //点击的元素和展开的元素不同时关闭
    //   if (!this.$refs.target.contains(e.target)) {
    //     this.close();
    //   }
    // });
  },
};
</script>

<style lang="scss" scoped>
.test {
  width: 100px;
  height: 100px;
  background-color: red;
}
.xtx-city {
  display: inline-block;
  position: relative;
  z-index: 400;
  .select {
    border: 1px solid #e4e4e4;
    height: 30px;
    padding: 0 5px;
    line-height: 28px;
    cursor: pointer;
    &.active {
      background: #fff;
    }
    .placeholder {
      color: #999;
    }
    .value {
      color: #666;
      font-size: 12px;
    }
    i {
      font-size: 12px;
      margin-left: 5px;
    }
  }
  .option {
    width: 542px;
    border: 1px solid #e4e4e4;
    position: absolute;
    left: 0;
    top: 29px;
    background: #fff;
    min-height: 30px;
    line-height: 30px;
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    > span {
      width: 130px;
      text-align: center;
      cursor: pointer;
      border-radius: 4px;
      padding: 0 3px;
      &:hover {
        background: #f5f5f5;
      }
    }
  }
}
</style>
